<template>
    <div>


        <div style='float: right'>
            <el-button icon='el-icon-circle-plus-outline' @click='addAnnButton' size='small' type="success" round>新增公告</el-button>
        </div>

        <div>
            <el-table
                :border = 'border'
                :data="announcementTable"
                style="width: 100%">
                <el-table-column
                    type="index"
                    width="80">
                </el-table-column>

                <el-table-column
                    prop="title"
                    label="公告标题"
                    width="150">
                </el-table-column>

                <el-table-column
                    prop="content"
                    label="公告内容"
                    width="200"
                    :resizable = 'resizable'
                    show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="storeName"
                        label="公告对应店铺"
                        width="150">
                </el-table-column>

                <el-table-column
                    prop="startTime"
                    label="公告开始时间"
                    width="180">
                </el-table-column>

                <el-table-column
                    prop="endTime"
                    label="公告结束时间"
                    width="180">
                </el-table-column>


                <el-table-column
                    label="公告状态"
                    width="80">
                    <template slot-scope="scope">
                        <el-button @click='changeAnnouncementStatus(scope.row)' size='mini' v-if='scope.row.announcementStatus===true' type="success">显示中</el-button>
                        <el-button @click='changeAnnouncementStatus(scope.row)'  size='mini' v-else type="info">隐藏</el-button>
                    </template>
                </el-table-column>

<!--                <el-table-column-->
<!--                    prop="updateTime"-->
<!--                    label="公告更新时间"-->
<!--                    width="180">-->
<!--                </el-table-column>-->

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="210">

                    <template slot-scope="scope">

                        <router-link :to="{path:'/annComment',query: {index: scope.row.announcementId}}">
                            <el-button type="text" size="small">查看留言</el-button>
                        </router-link>

                        <el-button style='margin-left: 10px' @click="editAnnButton(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click='deleteAnn(scope.row)' type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <el-pagination
                background
                layout="prev, pager, next"
                @current-change='selectPage'
                :page-size='size'
                :total='total'>
            </el-pagination>


            <!-- Form -->

            <el-dialog :title="dialogTitle" :visible.sync="addAnnV">

                <el-card class="box-card">
                    <el-form :model="addAnnForm"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="公告题目" prop="name">
                            <el-input required='required' type='text' maxlength="64" show-word-limit v-model="addAnnForm.title"></el-input>
                        </el-form-item>


                        <el-form-item label="公告内容" prop="name">
                            <el-input type='textarea' rows='8' maxlength='512' show-word-limit v-model="addAnnForm.content"></el-input>
                        </el-form-item>


                        <el-form-item >
                        <div class="block">
                            <el-date-picker
                                v-model="value1"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="公告开始日期"
                                end-placeholder="公告结束日期"
                                align="right">
                            </el-date-picker>
                        </div>
                        </el-form-item>

                        <el-form-item label='公告状态'>
                            <el-switch
                                style="display: block"
                                v-model="addAnnForm.announcementStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="显示"
                                inactive-text="隐藏">
                            </el-switch>
                        </el-form-item>

                        <el-form-item label="选择店铺" v-if="dialogTitle === '添加公告'">
                            <el-select  v-model="addAnnForm.storeId" placeholder="请选择店铺">

                                <el-option v-for='item in storeList' :label='item.storeName' :value="item.storeId"></el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addAnnV = false">取 消</el-button>
                    <el-button type="primary" @click='addAnnMethod'>提 交</el-button>
                </div>
            </el-dialog>
        </div>

        <div style='float: right;margin-bottom:80px'>
            <el-link type="primary">数据总条数:{{total}}</el-link>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            storeList: [

            ],
            value1:[],
            addAnnForm:{
                announcementId: null,
                storeId: null,
                title: '',
                content: '',
                startTime: null,
                endTime: null,
                announcementStatus:  true
            },
            addAnnV: false,
            border: true,
            resizable: true,
            announcementTable:[], //公告列表
            searching: false, //是否正在分类检索
            selectedCategoryId: null, //分类检索
            dialogTitle: '',
            total: 100, //总数
            size: 10, //没页数据条数
        }
    },
    created() {
        const _this = this;
        this.getFirstData();
        this.getAllStore();
    },
    computed:{
        // getStoreName(){
        //     return function (id) {
        //         for (let i = 0; i < this.storeList.length; i++) {
        //             if (this.storeList[i].storeId === id){
        //                 return this.storeList[i].storeName;
        //             }
        //         }
        //         return null;
        //     }
        //
        // }
    },
    methods:{
        //获取所有店铺信息
        getAllStore(){
            const _this = this;
            this.$http.get('dev-api/admin/ann/allStore')
            .then(function (resp) {
                if (resp.data.code === 0){
                    _this.storeList = resp.data.data
                }else {
                    _this.$message.error(resp.data.msg)
                }
            })
        },
        //获取第一页公告信息
        getFirstData(){
            const _this = this;
            this.$http.get('dev-api/admin/ann/list/1/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.announcementTable = resp.data.data.content;
                        _this.total = resp.data.data.total;
                        //console.log(_this.foodInfoTable)
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })
        },
        //修改公告按钮
        editAnnButton(row){
            this.dialogTitle = '修改公告';
            this.addAnnForm.announcementId = row.announcementId;
            this.addAnnForm.title = row.title;
            this.addAnnForm.content = row.content;
            this.addAnnForm.storeId = row.storeId;
            this.value1 = [];
            this.value1[0] = row.startTime;
            this.value1[1] = row.endTime;
            this.addAnnForm.announcementStatus = row.announcementStatus;
            this.addAnnV = true;
        },

        //显示/隐藏公告
        changeAnnouncementStatus(row){

            let message = '' ;
            let a = '';
            if (row.announcementStatus===true){
                a = '隐藏';
                message = '将被隐藏,是否继续?'
            }else{
                a = '显示';
                message = '将被显示,是否继续?'
            }
            const _this = this;
            this.$confirm('['+row.title+']'+message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.put('dev-api/admin/ann/status/'+row.announcementId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: a+'公告['+row.title+']成功!'
                            });
                            row.announcementStatus = !row.announcementStatus;
                        }else{
                            _this.$message({
                                type: 'error',
                                message: resp.data.msg
                            });
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //删除菜品
        deleteAnn(row){

            const _this = this;
            this.$confirm('删除公告['+row.title+'], 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.delete('dev-api/admin/ann/delete/'+row.announcementId)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            //刷新数据
                            _this.getFirstData();
                            _this.$message({
                                type: 'success',
                                message: '删除公告['+row.title+']成功!'
                            });
                        }else{
                            _this.$message({
                                type: 'error',
                                message: resp.data.msg
                            });
                        }
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //查询某一页数据
        selectPage(currentPage){
            const _this = this;

            this.$http.get('dev-api/admin/ann/list/'+currentPage+'/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.announcementTable = resp.data.data.content;
                        _this.total = resp.data.data.total;
                        //console.log(_this.foodInfoTable)
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })

        },
        //新增公告或修改公告
        addAnnMethod(){
            this.addAnnForm.startTime = this.value1[0];
            this.addAnnForm.endTime = this.value1[1];
            const _this = this;

            if (this.dialogTitle === '添加公告'){
                this.$http.post('dev-api/admin/ann/add',_this.addAnnForm)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.getFirstData();
                            _this.$message.success('添加公告成功');
                            _this.addAnnV = false;
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })
                    .catch(() => {
                        _this.$message.error("获取失败")
                    })
            }else { //修改公告
                this.$http.put('dev-api/admin/ann/update',_this.addAnnForm)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.getFirstData();
                            _this.$message.success('修改公告成功');
                            _this.addAnnV = false;
                        }else{
                            _this.$message.error(resp.data.msg);
                        }
                    })
                    .catch(() => {
                        _this.$message.error("获取失败")
                    })
            }

        },

        //添加公告,打开对话框
        addAnnButton(){
            this.addAnnForm.title = '';
            this.addAnnForm.content = '';
            this.addAnnForm.storeId = null;
            this.value1 = [];
            this.addAnnForm.announcementStatus = true;
            this.dialogTitle = '添加公告';
            this.addAnnV = true;
        },
        lookComment(){


        }
    }
}
</script>
